<template>
  <div id="my">
      <div class="denglu" v-if="isShow==true">
            <img src="/miaomiao-2.png" class="login-avatar" alt="">
           <div class="login-text">{{nickname}}<span @click="logOut">退出登录</span></div>
      </div>
       <div class="denglu2" v-else>
           <router-link to='/mine/login' tag="img" class="login-avatar" src="/miaomiao-1.png"></router-link>
            <router-link to='/mine/login' tag="div" class="login-text">{{nickname}}<span>></span></router-link>
      </div>
      <div class="icon">
          <img src="/icon1.png" alt="">
          <img src="/icon2.png" alt="">
          <img src="/icon3.png" alt="">
      </div>
      <div class="more">
          <ul>
              <li @click="iconColor" style="color:#f06b6b;"><i class="iconfont">&#xe66d;</i>电影成就<span>></span></li>
               <!-- <li :class="{active:isActive}" @click="iconColor"><i class="iconfont">&#xe66d;</i>电影成就<span>></span></li> -->
          </ul>
           <ul>
              <li ><i class="iconfont">&#xe857;</i>消息中心<span>></span></li>
              <li><i class="iconfont">&#xe65c;</i>我的社区<span>></span></li>
          </ul>
            <ul>
              <li><i class="iconfont">&#xe6b1;</i>我的钱包<span>></span></li>
              <li><i class="iconfont">&#xe8c0;</i>我的优惠券<span>></span></li>
              <li><i class="iconfont">&#xe618;</i>喵喵商城<span>></span></li>
          </ul>
      </div>
      
  </div>
</template>

<script>
export default {
     name:'My',
     data(){
         return{
             isActive:true,
             nickname:'',
             isShow:false
         }
     },
     methods:{
         iconColor(){
            this.isActive = !this.isActive
         },
         logOut(){
             localStorage.removeItem('nickname')
             window.location.reload() 
         }
     },
    created(){
      // 如果有本地存储信息，则直接从本地获取
      let nickname = window.localStorage.getItem('nickname');
      //console.log(nickname);
      if(nickname){
        this.nickname = JSON.parse(nickname);
        // this.nickname = nickname
        this.$nextTick(function(){
            this.nickname = '你好!'+nickname
        });
        this.isShow = !this.isShow
        return;
      }else{
          this.nickname = '立即登录'
      }
    },
     
}
</script>

<style scoped>
#my{
    background: #f5f5f5;
}
.denglu{
    background: #f06b6b;
    height: 80px;
    /* overflow: hidden; */
    position: relative;
}
.denglu2{
    background: #f06b6b;
    height: 80px;
    /* overflow: hidden; */
    position: relative;
}
.login-avatar{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    margin-left: 15px;
}
.login-text{
    width: 75%;
    position: absolute;
    left: 70px;
    top: 30px;
    color: #fff;
    font-weight: 900;
}
.login-text span{
    float: right;
}
.icon{
    width: 100%;
    height: 100px;
    background: #fff;
    margin-top: 10px;
    display: flex;
    justify-content:space-around;
}
.icon img{
    width: 100px;
    height: 100px;
}
.more{
    width: 100%;
    height: 366px;
    background: #f5f5f5;
    margin-top: 10px;
}
.more ul{
    margin-top: 10px;
}
.more li{
    height: 55px;
    background: #fff;
    line-height: 55px;
    padding: 0 20px;
    font-size: 20px;
    color: #999;
}
.more span{
    float: right;
    padding-right: 10px;
}
.iconfont{
    /* color: red; */
    font-size: 26px;
    padding-right: 15px;
    display: inline-block;
}
.active{
     color: #f06b6b;
}


</style>
